<template>
  <div>
    <el-form :model="basicInfo" :rules="rules" ref="basicInfo" label-width="100px">
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>商品活动配置基本信息</h4>
          <el-form-item label="分公司" required >
            <el-select v-if="!brachDisabled" v-model="basicInfo.branchId" :disabled="brachDisabled" style="width:220px" @change="searchAllActivity($event, '分公司')">
            <!-- <el-select v-if="!brachDisabled" v-model="basicInfo.branchId" :disabled="brachDisabled" style="width:220px"> -->
              <el-option v-for="(item, index) in this.branchList" :value="item.branch_Id" :label="item.branch_Name" :key="index"></el-option>
            </el-select>
            <el-input v-if="brachDisabled" v-model="showBranch" :disabled="brachDisabled" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="客资类型" required >
            <el-select v-model="basicInfo.userType" style="width:220px" @change="searchAllActivity" :loading="customerTypeLoading" placeholder="客资类型">
            <!-- <el-select v-model="basicInfo.userType" style="width:220px" :loading="customerTypeLoading" placeholder="客资类型"> -->
              <!-- <el-option value="1" label="普通超市"></el-option> -->
              <el-option v-for="(item, index) in customerTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联活动">
            <el-select v-model="basicInfo.relateAcId" filterable clearable  placeholder="关联活动" style="width:220px">
              <el-option v-for="(item, index) in activityGroup" :label="item.activityName" :value="item.activityId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动名称" prop="activityName">
            <el-input v-model="basicInfo.activityName" placeholder="活动名称" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="排序方式">
            <el-radio-group v-model="basicInfo.classification">
              <el-radio :label="0">常规</el-radio>
              <el-radio :label="3">品牌</el-radio>
              <el-radio :label="1">一级分类</el-radio>
              <el-radio :label="2">二级分类</el-radio>
            </el-radio-group>
            <el-button v-show="basicInfo.classification !== 0" type="primary" style="margin-left: 20px" @click="getClassInfo">生成分类信息</el-button>
          </el-form-item>
          <el-form-item label="分类信息" v-show="basicInfo.classification !== 0">
            <el-table :data="basicInfo.classificationInfos" style="width:50%" size="small" border v-loading="setTableLoading">
              <el-table-column label="名称" prop="typeName" align="center"></el-table-column>
              <el-table-column label="序号" align="center">
                <template scope="scope">
                  <el-input style="width: 100px" v-model="scope.row.sort"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="背景颜色" prop="backgroundColor">
            <el-radio-group v-model="basicInfo.backgroundColor">
              <el-radio label="#2b2b2b" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#2b2b2b;"></div></el-radio>
              <el-radio label="#cdcdcd" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#cdcdcd;"></div></el-radio>
              <el-radio label="#ffffff" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#ffffff;"></div></el-radio>
              <el-radio label="#ca2d3e" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#ca2d3e;"></div></el-radio>
              <el-radio label="#f9b1b9" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#f9b1b9;"></div></el-radio>
              <el-radio label="#fc841f" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#fc841f;"></div></el-radio>
              <el-radio label="#f7d919" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#f7d919;"></div></el-radio>
              <el-radio label="#ffe5b2" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#ffe5b2;"></div></el-radio>
              <el-radio label="#02529b" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#02529b;"></div></el-radio>
              <el-radio label="#22a7e5" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#22a7e5;"></div></el-radio>
              <el-radio label="#b3d1ed" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#b3d1ed;"></div></el-radio>
              <el-radio label="#5eac24" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#5eac24;"></div></el-radio>
              <el-radio label="#b9d107" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#b9d107;"></div></el-radio>
              <el-radio label="#6a0084" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#6a0084;"></div></el-radio>
              <el-radio label="#9aa1ff" style="margin-right:20px"><div class="radioDiv" style="backgroundColor:#9aa1ff;"></div></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="banner图片" required >
            <el-upload
              class="avatar-uploader"
              :action="url"
              name="imageFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              accept=".jpg,.png">
              <img v-if="basicInfo.bannerImage" :src="imgHost + '/' + basicInfo.bannerImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="活动规则" required >
            <span style="color:#f00">注：请勿设置字号，第一行为标题，列举规则点时，请回车排版即可。编辑规则时，请删掉编辑器中的例子。</span>
            <quill-editor ref="myTextEditor"
              v-model="basicInfo.activityMemo"
              :config="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              placeholder="活动名称"
              >
            </quill-editor>
          </el-form-item>
        </div>
      </div>
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>商品分类块信息配置</h4>
          <el-button type="primary" style="margin-bottom:20px" @click="addProClass">添加分类块</el-button>
          <el-table :data="basicInfo.productActivityInfos" border >
            <el-table-column label="分类标题" align="center">
              <template scope="scope">
                <el-input v-model="scope.row.blockName" placeholder=""></el-input>
              </template>
            </el-table-column>
            <el-table-column label="商品排列样式" align="center">
              <template scope="scope">
                <el-select v-model="scope.row.blockDisplay" placeholder="商品排列样式" @change="blockDisplayChange($event, scope.$index)">
                  <el-option label="一列" value="1"></el-option>
                  <el-option label="二列" value="2"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="关联类型" align="center" >
              <template scope="scope">
                <el-select v-model="scope.row.relateType" placeholder="关联类型" @change="relateTypeChange($event, scope.$index)">
                  <el-option label="关联内容" value="1"></el-option>
                  <el-option label="关联满赠活动" value="2"></el-option>
                  <el-option label="关联满减活动" value="3"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="内容/活动Id" align="center">
              <template scope="scope">
                <el-input v-model="scope.row.contentId" :disabled="true"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template scope="scope">
                <el-button size="small" @click="getContent(scope.$index, scope.row)">关联</el-button>
                <el-button size="small" @click="delProClass(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <div style="margin: 20px auto 20px;width:20%">
      <el-button @click="onSubmit(1, 'basicInfo')" type="success">提交</el-button>
      <el-button @click="onSubmit(0, 'basicInfo')" type="warning">暂存</el-button>
      <el-button @click="cancel(menuId, 1)" type="danger">取消</el-button>
    </div>
    <el-dialog title="活动关联内容" :visible.sync="contentDialog">
      <el-form :inline="true" style="margin-top:20px" label-width="120px">
        <el-form-item label="内容/活动ID">
          <el-input v-model="contentInfo.id" placeholder="" style="width:160px"></el-input>
        </el-form-item>
        <el-form-item label="内容/活动名称">
          <el-input v-model="contentInfo.name" placeholder="" style="width:160px"></el-input>
        </el-form-item>
        <el-button type="primary" @click="searchContent(1)" style="float:right">查询</el-button>
      </el-form>
      <el-table :data="contentList" border v-loading="contentLoading">
        <el-table-column label="内容id" prop="id" align="center"></el-table-column>
        <el-table-column label="内容名称" prop="name" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template scope="scope">
            <el-button size="small" @click="setContentId(scope.$index)">关联</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="pageDisabled"
        @current-change="handleCurrentChange"
        :page-size="Number(pageSize)"
        layout="total, prev, pager, next"
        :total="Number(total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
    <!--<el-dialog title="分类信息" :visible.sync="setSortDialog">-->
      <!--<el-table :data="setSortTableList" border v-loading="setTableLoading">-->
        <!--<el-table-column label="套餐ID" prop="id" align="center"></el-table-column>-->
        <!--<el-table-column label="序号" align="center">-->
          <!--<template scope="scope">-->
            <!--<el-input style="width: 100px" v-model="scope.row.sort_value"></el-input>-->
          <!--</template>-->
        <!--</el-table-column>-->
      <!--</el-table>-->
    <!--</el-dialog>-->
  </div>
</template>
<script>
  import Vue from 'vue'
  import { getInfo, gggl, hdljpz, column, activity } from '../../config/proxy.js'
  import { apiHost, apiURL } from '../../config/settings.js'
  import mixins from '../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        setSortDialog: false,
        setSortTableList: [],
        setTableLoading: false,
        basicInfo: {
          classification: 0,
          classificationInfos: [],
          classificationInfo: [],
          branchId: '', // 分公司
          userType: 1, // 客资类型
          relateAcId: '', // 关联活动
          activityName: '', // 活动名称
          backgroundColor: '', // 背景颜色
          bannerImage: '', // BANNER
          activityMemo: '例子：活动规则 </br>' +
          '1.组合套餐不能使用优惠券; </br>' +
          '2.套餐商品加入购物车后3小时将被清楚; </br>' +
          '3.套餐商品无质量问题不予退货，如出现退货情况需要将整套套餐商品一起退回; </br>' +
          '4.组合套餐的使用方法：组合任选套餐在套餐内除了商品必选外可以选择自己想要的一个或多个商品自由组合;</br>', // 活动规则
          // blockName: '', // 分类标题
          // blockName: '', // 多个分类块 分类标题
          // // blockDisplay: '', // 商品排列样式 1一列 2两列
          // blockDisplay: '1,2', // 多个分类块 商品排列样式
          // // relateType: '', // 关联类型 1 关联内容 2 满赠
          // relateType: '', // 多个分类块 关联类型
          // // contentId: '', // 内容/活动ID
          // contentId: '' // 多个分类块 内容/活动ID
          productActivityInfos: [] // 商品分类信息数组
        },
        editorOption: {
        // something config
        }, // 编辑器配置
        // dataTable: [], // 商品分类数组
        activityGroup: [], // 关联活动数组
        equipments: [], // 所属设备中间变量
        equipmentsGroup: [], // 所属设备数组
        // radioModel: [], // radioModel
        showBranch: [],
        brachDisabled: false,
        customerTypeLoading: false, // 客资类型loading
        customerTypeList: [], // 客资类型数组
        markidGroup: [], // 广告类型数组
        actionGroup: [], // 跳转动作数组
        startStopTime: '', // 起止时间
        url: '', // 上传图片地址
        imageUrl: '', // 图片路径
        menuId: '',
        isCreateOrUpdate: '',
        detailData: [], // 详情
        tag: '',
        actionTag: false,
        actionName: '',
        contentDialog: false, // 关联内容弹框
        contentInfo: {
          name: '',
          id: ''
        },
        contentList: [], // 关联内容数组
        contentLoading: false, // 内容tableloading
        index: '', // 选择要关联的行index
        row: '', // 选择样关联的行
        rules: {
          activityName: [
            { required: true, message: '请输入活动名称', trigger: 'blur, change' }
          ],
          relateAcId: [
            { required: true, type: 'number', message: '请选择关联活动', trigger: 'change' }
          ],
          backgroundColor: [
            { required: true, message: '请选择背景颜色', trigger: 'change' }
          ]
        },
        imgValid: false,
        proValid: false,
        imgHost: '',
        page: 1,
        pageSize: 10,
        total: 0,
        pageDisabled: false
      }
    },
    methods: {
      getClassInfo () {
        if (this.basicInfo.productActivityInfos.length === 0) {
          this.message('请先添加分类块信息', 'error')
          return false
        }
        if (this.basicInfo.productActivityInfos[0].relateType === '' || this.basicInfo.productActivityInfos[0].contentId === '') {
          this.message('请先关联活动和选择关联类型', 'error')
          return false
        }
        this.setTableLoading = true
        var _data = {
          branchId: this.basicInfo.branchId,
          classType: this.basicInfo.classification,
          id: this.basicInfo.productActivityInfos[0].contentId,
          type: this.basicInfo.productActivityInfos[0].relateType,
          userType: this.basicInfo.userType
        }
        hdljpz.ue.brandList(_data, (res) => {
          if (res.message === 'ok') {
            this.basicInfo.classificationInfos = res.content
            this.setTableLoading = false
          }
        })
      },
      searchCustomerType () { // 查询客资类型
        var _data = ''
        getInfo.client(_data, (res) => {
          // console.log(res)
          if (res.message === 'ok') {
            this.customerTypeList = res.content.content
            this.customerTypeLoading = false
            this.searchAllActivity()
          }
        })
      },
      // userTypeChange () {
      //   this.searchAllActivity()
      // },
      blockDisplayChange (val, index) { // 商品排列样式切换
        console.log(val, index)
        // console.log(this.basicInfo.productActivityInfos[index].contentId === '')
        this.basicInfo.productActivityInfos[index].contentId = this.basicInfo.productActivityInfos[index].contentId === '' ? '' : ''
      },
      relateTypeChange (val, index) { // 关联类型切换
        console.log(val, index)
        // console.log(this.basicInfo.productActivityInfos[index].contentId === '')
        this.basicInfo.productActivityInfos[index].contentId = this.basicInfo.productActivityInfos[index].contentId === '' ? '' : ''
        this.contentList = []
        this.pageDisabled = false
        // this.page = 1
        // this.total = 0
      },
      searchAllActivity (val, type) { // 查询所有关联活动
        console.log(this.basicInfo.relateAcId)
        if (type) {
          this.contentList = []
          this.page = 1
          // this.total = 0
        }
        this.basicInfo.relateAcId = this.isCreateOrUpdate === 'update' ? this.basicInfo.relateAcId : ''
        var _data = {}
        _data.branchId = this.basicInfo.branchId
        _data.userType = this.basicInfo.userType
        _data.type = 1
        if (this.basicInfo.branchId !== '' && this.basicInfo.userType !== '') {
          console.log(_data)
          gggl.dhxtgg.banner.getAct(_data, (res) => {
            console.log(res)
            if (res.message === 'ok') {
              this.activityGroup = res.content
            }
          })
        }
      },
      handleAvatarSuccess (res, file) { // 上传图片成功
        console.log(res)
        if (res.message === 'ok') {
          this.basicInfo.bannerImage = res.content.imageUrl
          this.imgValid = true
        } else {
          this.imgValid = false
          this.message('上传图片失败', 'error')
        }
      },
      beforeAvatarUpload (file) { // 上传图片之前
        const isLt3M = file.size / 1024 / 1024 < 3
        if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 3MB!')
        }
        return isLt3M
      },
      onEditorBlur (editor) { // 上传
        console.log('editor blur!', editor)
        // console.log(this.content)
        // var _data = {
        //   // imgStr: this.content.substring(this.content.indexOf(',') + 1, this.content.indexOf('">')),
        //   imgStr: this.content
        // }
        // console.log(_data)
        // hdljpz.ue.upload(_data, (res) => {
        //   console.log(res)
        // })
      },
      onEditorFocus (editor) {
        console.log('editor focus!', editor)
      },
      // onEditorReady (editor) {
      //   // console.log('editor ready!', editor)
      // },
      onEditorChange ({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.basicInfo.activityMemo = html
        // console.log(this.content)
      },
      addProClass () { // 添加商品分类
        if (this.basicInfo.productActivityInfos.length === 1) {
          this.message('只能添加一条信息', 'error')
          return false
        }
        var pro = {
          blockName: '', // 分类标题
          blockDisplay: '', // 商品排列样式 1一列 2两列
          relateType: '', // 关联类型 1 关联内容 2 满赠
          contentId: '' // 内容/活动ID
        }
        console.log('myjhdsh')
        Vue.set(this.basicInfo.productActivityInfos, this.basicInfo.productActivityInfos.length, pro)
        console.log(this.basicInfo.productActivityInfos)
      },
      delProClass (index) { // 删除商品分类
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.basicInfo.productActivityInfos.splice(index, 1)
          this.message('删除成功', 'success')
        }).catch(() => {
        })
      },
      getContent (index, row) { // 点击关联按钮
        if (this.basicInfo.productActivityInfos[index].relateType === '') {
          this.message('请选择关联内容', 'error')
        } else {
          this.index = index
          this.row = row
          this.contentDialog = true
          this.contentList = []
          this.pageDisabled = false
          // this.total = 0
          // this.page = 1
        }
        // hdljpz.sphd.getContent('', (res) => {
        //   if (res.message === 'ok') {
        //     this.dataTable[index].contentId = res.content.contentId
        //   }
        // })
      },
      handleCurrentChange (val) { // 分页查询
        this.page = val
        this.searchContent(val)
      },
      searchContent (page) { // 查询关联内容
        console.log(this.row)
        console.log(column)
        var _data = {}
        switch (this.row.relateType) {
          case '1':
            _data.id = this.contentInfo.id
            _data.name = this.contentInfo.name
            _data.branchId = this.basicInfo.branchId
            _data.page = page
            _data.pageSize = this.pageSize
            _data.state = 20 // 查询上线状态
            this.contentLoading = true
            console.log(_data)
            column.content.list(_data, (res) => {
              if (res.message === 'ok') {
                console.log(res)
                this.contentList = res.content.content
                this.contentLoading = false
                this.total = res.content !== null ? res.content.count : 0
                this.page = res.content !== null ? res.content.page : 0
                this.pageDisabled = true
              }
            })
            break
          case '2':
            this.searchGoodsSetList(_data, 5, page)
            // _data.limit_branch_id = this.basicInfo.branchId
            // _data.promotion_type = 5
            // _data.page = this.page
            // _data.pageSize = this.pageSize
            // _data.check_status = 6
            // this.contentLoading = true
            // activity.sphd.list(_data, (res) => {
            //   console.log(res)
            //   this.contentList = []
            //   if (res.message === 'ok') {
            //     this.contentLoading = false
            //     var obj = {}
            //     res.content.list.forEach((element, index) => {
            //       obj.id = element.id
            //       obj.name = element.promotion_name
            //       this.contentList.push(obj)
            //     })
            //     this.total = res.content !== null ? res.content.count : 0
            //   }
            // })
            break
          default:
            this.searchGoodsSetList(_data, 4, page)
            break
        }
      },
      searchGoodsSetList (data, type, page) {
        data.limit_branch_id = this.basicInfo.branchId
        data.promotion_type = type
        data.page = page
        data.pageSize = this.pageSize
        data.sortType = 2
        data.orderBy = 2
        data.check_status = '5,6'
        this.contentLoading = true
        activity.sphd.list(data, (res) => {
          console.log(res)
          this.contentList = []
          if (res.message === 'ok') {
            this.contentLoading = false
            if (res.content.list) {
              res.content.list.forEach((element, index) => {
                var obj = {}
                obj.id = element.id
                obj.name = element.promotion_name
                this.contentList.push(obj)
              })
              this.total = res.content !== null ? res.content.count : 0
              this.pageDisabled = true
            } else {
              this.contentList = []
            }
          }
        })
      },
      setContentId (index) { // 设置contentid
        // console.log(this.contentList[index].id)
        // console.log(this.dataTable[this.index].contentId)
        this.basicInfo.productActivityInfos[this.index].contentId = this.contentList[index].id
        this.contentDialog = false
        this.contentList = []
        this.pageDisabled = false
        // this.page = 1
        // this.total = 0
        console.log(this.contentList)
      },
      searchDetail (row) { // 查询详情
        console.log(row.id)
        hdljpz.sphd.detail({id: row.id}, (res) => {
          console.log(res, '详情')
          if (res.message === 'ok') {
            if (this.branchId === 1) {
              this.brachDisabled = false
              this.basicInfo.branchId = res.content.branchId
              // this.sortInfo.branchId = this.branchId
            } else {
              this.brachDisabled = true
              this.showBranch = res.content.branchName
              this.basicInfo.branchId = res.content.branchId
              // this.formInline.branchId = this.branchId
            }
            console.log(res, '详情')
            console.log(res.content.relateAcId)
            this.detailData = res.content
            this.basicInfo.userType = res.content.userType
            this.basicInfo.classification = res.content.classification
            this.basicInfo.classificationInfos = res.content.classificationInfos
            this.basicInfo.relateAcId = res.content.relateAcId === 0 ? '' : res.content.relateAcId
            console.log(this.basicInfo.relateAcId)
            this.basicInfo.activityName = res.content.activityName
            this.basicInfo.backgroundColor = res.content.backgroundColor
            this.basicInfo.bannerImage = res.content.bannerImage
            if (res.content.bannerImage) {
              this.imgValid = true
            }
            this.basicInfo.activityMemo = res.content.activityMemo
            this.basicInfo.productActivityInfos = res.content.productActivityInfos
            for (let index = 0; index < this.basicInfo.productActivityInfos.length; index++) {
              const element = this.basicInfo.productActivityInfos[index]
              element.blockDisplay = element.blockDisplay.toString()
              element.relateType = element.relateType.toString()
            }
          } else {
            this.message('查询详情失败', 'error')
          }
        })
      },
      valid () {
        if (this.imgValid !== true) {
          this.message('请上传图片', 'error')
        }
        if (this.basicInfo.productActivityInfos.length === 0) {
          this.message('请添加商品类块', 'error')
        } else {
          for (let i = 0; i < this.basicInfo.productActivityInfos.length; i++) {
            const ele1 = this.basicInfo.productActivityInfos[i]
            if (ele1.blockName === '' || ele1.blockDisplay === '' || ele1.relateType === '' || ele1.contentId === '') {
              this.message('请填写商品分类块的信息', 'error')
              this.proValid = false
            } else {
              this.proValid = true
            }
          }
        }
      },
      onSubmit (type, formName) { // 创建
        if (this.basicInfo.classification !== 0 && this.basicInfo.classificationInfos.length === 0) {
          this.message('分类信息不能为空', 'error')
          return false
        }
        this.$refs[formName].validate((valid) => {
          this.valid()
          if (valid && this.imgValid === true && this.proValid === true) {
            var _data = this.basicInfo
            _data.createUser = this.isCreateOrUpdate === 'create' ? this.userName : this.detailData.branchName
            _data.updateUser = this.isCreateOrUpdate === 'create' ? '' : this.userName
            _data.id = this.isCreateOrUpdate === 'create' ? '' : this.detailData.id
            _data.state = type
            console.log(_data)
            console.log(this.isCreateOrUpdate)
            hdljpz.sphd[this.isCreateOrUpdate](_data, (res) => {
              console.log(res)
              if (res.message === 'ok') {
                this.message(this.text + '成功', 'success')
                this.$store.dispatch('sphdState', this.$store.state.updateState.sphdState + 1)
                this.cancel(this.menuId)
              } else {
                this.message(this.text + '失败', 'error')
              }
            })
          }
        })
      },
      cancel (id, num) { // 取消
        if (num) {
          this.$confirm('确定要取消？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('delTab', {id: id})
          }).catch(() => {
          })
        } else {
          this.$store.dispatch('delTab', {id: id})
        }
      },
      daterangeFormat (t) { // 时间段格式化
        console.log(t.split(' - '))
        var tGroup = t.split(' - ')
        this.basicInfo.orderuptime = tGroup[0]
        this.basicInfo.offlinetime = tGroup[1]
      },
      timeDeltSecond (d) { // 时间去秒
        if (d) {
          return d.split(' ')[0]
        }
      },
      strToArr (str) { // 字符串数组转换
        var arr = []
        if (str.length > 1) {
          arr = str.split(',')
        } else {
          arr.push(str)
        }
        return arr
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    computed: {
      update_state: function () {
        // console.log(state.updateState.dhmState)
        return this.$store.state.updateState.dztzState
      },
      userName: function () {
        if (!this.$store.state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return this.$store.state.user.info.user_name
      },
      userId: function () {
        return this.$store.state.user.info.roleid
      },
      branchName: function () {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function () {
        return this.$store.state.user.info.branchId
      },
      deptName: function () {
        return this.$store.state.user.info.parOrgName
      },
      deptId: function () {
        return this.$store.state.user.info.or_org_id
      }
    },
    created () {
      this.url = 'http://' + apiHost.newCms + ':20000' + apiURL.goodsSet_uploadImage
      this.imgHost = apiHost.imgHost
      this.menuId = this.$store.state.tab.menuId
      // console.log(this.$store.state.tab)
      if (this.$store.state.tab.uid) {
        this.isCreateOrUpdate = 'update'
        this.text = '编辑'
        this.searchCustomerType() // 查询客资类型
        this.searchDetail(this.$store.state.tab.uid)
      } else {
        this.isCreateOrUpdate = 'create'
        this.text = '新增'
        this.searchCustomerType() // 查询客资类型
        if (this.branchId === 1) {
          this.brachDisabled = false
          this.basicInfo.branchId = this.branchId
          // this.sortInfo.branchId = this.branchId
        } else {
          this.brachDisabled = true
          this.showBranch = this.branchName
          this.basicInfo.branchId = this.branchId
          // this.formInline.branchId = this.branchId
        }
      }
    }
  }
</script>
<style>
  .radioDiv{
    width:16px;height:16px;display:inline-block;
    position: absolute;top: 0;left: 25px;
    border: 1px solid #000;
  }
</style>
